<template>
  <div style="margin-top: 20px">
    <van-nav-bar class="dz-dh"
                 title="激情活动"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"/>
  </div>
  <div>
    <div>
      <div>
        <van-tabs v-model:active="active" @click-tab="loadData()">
          <van-tab title="预热">
            <div class="dv1" v-for="a in activitys">
              <van-row>
                <van-col :span="10">
                  <img class="img1" :src="a.imgurl">
                </van-col>
                <van-col :span="13">
                  <h4 class="dv2">{{ a.title }}</h4>
                  <div class="dv2">开始日期：{{ a.sdate }}</div>
                  <div class="dv2">结束日期：{{ a.edate }}</div>
                  <div class="dv2">
                    <div>
                      <van-button class="btn1" type="primary" @click="add(a.id,this)">预约报名</van-button>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </van-tab>
          <van-tab title="即刻参加">
            <div class="dv1" v-for="a in activitys">
              <van-row>
                <van-col :span="10">
                  <img class="img1" :src="a.imgurl">
                </van-col>
                <van-col :span="13">
                  <h4 class="dv2">{{ a.title }}</h4>
                  <div class="dv2">开始日期：{{ a.sdate }}</div>
                  <div class="dv2">结束日期：{{ a.edate }}</div>
                  <div class="dv2">
                    <div>
                      <van-button class="btn1" type="primary" @click="start(a.id,this)">马上报名</van-button>

                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </van-tab>
          <van-tab title="我的活动" to="/myactivity" >
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CampaignView",
  data() {
    return {
      active: 0,
      activitys: [

      ],
      type: 1,
      btn1: false
    }


  },
  mounted() {
    //请求接口
    this.axios.get("http://localhost:8082/api/activity/query.do?type=1").then(r => {
      if (r.data.code == 200) {
        //
        this.activitys = r.data.data;
      }
    })
  }
  ,

  methods: {
    onClickLeft() {
      history.back();
    },
    loadData() {
      //根据类型 选择

      this.type = this.active + 1;
      //请求接口
      this.axios.get("http://localhost:8082/api/activity/query.do?type=" + this.type).then(r => {
        if (r.data.code == 200) {
          //
          this.activitys = r.data.data;
        }
      })
    },
    add(id, e) {

      //请求接口 实现活动报名 useractivity
      this.axios.get("http://localhost:8082/api/useractivity/add.do?aid=" + id).then(r => {
        if (r.data.code == 200) {
          this.$toast("恭喜你，报名活动成功！");

        } else {
          this.$toast(r.data.msg);
        }
      })
    },
    start(id, e) {

      //请求接口 实现活动报名 useractivity
      this.axios.get("http://localhost:8082/api/useractivity/add.do?aid=" + id).then(r => {
        if (r.data.code == 200) {
          this.$toast("亲，您已报名成功，赶紧开始吧！");
          //.disabled=true; 当前按钮不可点击
        } else {
          this.$toast(r.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped>

.dv1{
  background-color: ghostwhite;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  box-shadow: 5px 5px 3px gainsboro;
  border-radius: 20px;
  margin-bottom: 10px;
}
.dv2{
  margin: 5px;
  font-size: 13px;
}
.btn1{
  width: 80%;
  margin-left: 10%;
  border-radius: 20px;
  margin-bottom: 2px;
}
.img1{
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
</style>
